<template>
  <div class="main">
    <canvas id="canvasDom" class="canvas" width="400" height="400"></canvas>
    <div class="btns">
      <button @click="startDraw">开始绘制</button>
      <button @click="endDraw">结束绘制</button>
      <br>
      <button :class="activeBtn == 'drawLine'?'active':''" @click="drawLineHanlder">绘制线条</button>
      <button :class="activeBtn == 'drawArrow'?'active':''" @click="drawArrowHanlder">绘制箭头</button>
      <button :class="activeBtn == 'drawPolygon'?'active':''" @click="drawPolygonHanlder">绘制多边形</button>
      <button :class="activeBtn == 'drawStride'?'active':''" @click="drawStrideHanlder">绘制跨越线</button>
      <br>
      <br>
      <div style="text-align: left;">1:选择绘制对象后点击开始绘制</div>
      <div style="text-align: left;">2:点击结束绘制后，可选中绘制对象并进行拖动等</div>
    </div>
  </div>
</template>
<script>
import CanvasUtils from '@/utils/CanvasUtils.js'
export default{
  name: 'canvasDemo',
  data(){
    return {
      canvasUtils: null,
      activeBtn: null
    }
  },
  methods: {
    startDraw(){
      // 开始绘制
      this.canvasUtils.setStartDrawing(true)
    },
    endDraw(){
      // 结束绘制
      this.canvasUtils.setStartDrawing(false)
    },
    drawStrideHanlder(){
      // 绘制跨越线
      this.activeBtn = 'drawStride'
      this.canvasUtils.setDrawStatus('drawStride')
    },
    drawLineHanlder(){
      // 绘制线条
      this.activeBtn = 'drawLine'
      this.canvasUtils.setDrawStatus('drawLine')
    },
    drawArrowHanlder(){
      // 绘制箭头
      this.activeBtn = 'drawArrow'
      this.canvasUtils.setDrawStatus('drawArrow')
    },
    drawPolygonHanlder(){
      // 绘制多边形
      this.activeBtn = 'drawPolygon'
      this.canvasUtils.setDrawStatus('drawPolygon')
    },
    addPointAndDrawPolygonHanlder(){
      
    },
    movePointAndRedrawPolygonHanlder(){
      
    },
  },
  mounted(){
    this.canvasUtils = new CanvasUtils('canvasDom');
    this.canvasUtils.initCanvas()
  }
}
</script>
<style scoped>
.main{
  width: 400px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
  resize: both;

}
.canvas{
  width: 100%;
  height: 100%;
}
.active{
  background: #000;
  color: aliceblue;
}
</style>